<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>每天进步30秒</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="referrer" content="never">
    <link href="/css/iconfont.css" rel="stylesheet"/>
    <link href="/css/h5_style.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css"/>
    <link href="/css/card.css" rel="stylesheet"/>
</head>
<style>
    html, body {
        height: 100%;
        -webkit-text-size-adjust:100%;
    }

    .container_box {
        font-size: 14px;
    }

    .video-player {
        height: 100%;
        width: 100%;
    }

    .product_swiper {
        width: 100%;
        height: 100%;
    }

    .tools_r_num {
        text-align: center;
        text-shadow: 1px 2px 3px #000;
    }

    .van_swipe {
        width: 100%;
        height: 100%;
    }

    .van-swipe {
        width: 100%;
        height: 100%;
    }

    .container_box {
        width: 100%;
        height: 100%;
    }

    .video_box {
        object-position: 0 100%;
        object-fit: fill !important;
        z-index: 999;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    .video_box_w {
        object-fit: contain !important;
        object-position: initial;
    }

    .icon_play {
        position: absolute;
        top: 44%;
        right: 0;
        left: 0;
        bottom: auto;
        margin: auto;
        z-index: 999;
        height: 60px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
    }

    .platStart {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
    }

    /* 点赞，转发 */
    .tools_right {
        z-index: 1001;
        position: absolute;
        right: 5px;
        bottom: 155px;
    }

    .tools_r_li {
        margin-bottom: 4px;
        color: #fff;
        font-size: 14px;
        height: 73px;
        position: relative;
        text-align: center;
    }

    .tools_r_li:last-child {
        margin-bottom: 0px;
        position: relative;
        margin-top: -2px;
    }

    .tag_add {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        background: #f44;
        border-radius: 67px;
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        margin: 0 auto;
        z-index: 1;
    }

    .icon_right {
        font-size: 36px;
        display: block;
        text-shadow: 0px 0px 10px #9d9d9d;
        /*transition: .5s;*/
    }

    .icon_right_change {
        transition: .3s;
    }

    .icon_right_change:active {
        transform: scale(.5);
    }

    .production_box {
        z-index: 1001;
        position: absolute;
        min-height: 164px;
        /* right: 16px; */
        bottom: 0px;
        text-align: left;
        color: #fff;
        width: 100%;
        left: 0;
        padding-top: 30px;
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* Firefox 3.6 - 15 */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); /* 标准的语法 */
    }

    .production_box1 {
        position: absolute;
        top: 7px;
        left: 0;
        padding: 0 13px 15px 13px;
        width: 100%;
        box-sizing: border-box;
    }

    .production_no_tip > .production_box1 {
        top: 30px;
    }

    .production_name {
        /*font-weight: 700;*/
        font-size: 16px;
        margin-bottom: 10px;
    }

    .production_des {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 15px;
        margin-bottom: 5px;
    }

    .container_top {
        position: fixed;
        top: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        padding: 10px 15px;
        font-size: 14px;
    }

    .bottom_tab {
        width: 50%;
        text-align: center;
        float: left;
        color: #c9c9c9;
        padding: 10px 0;
    }

    .bottom_tab_span {
        line-height: 38px;
        border-bottom: 2px solid transparent;
        font-weight: 600;
        font-size: 16px;
        display: inline-block;
        padding: 0 4px;
        transition: .5s all;
    }

    .tab_active .bottom_tab_span {
        border-bottom: 2px solid #fff;
        color: #fff;
    }

    .production_top {
        display: inline-block;
        padding: 6px;
        margin-bottom: 5px;
        background: rgba(0, 0, 0, .6);
        border-radius: 6px;
        margin-top: 5px;
        font-size: 13px;
        line-height: 18px;
    }

    .product_go {
        color: #fbdd21;
        float: left;
    }

    .production_title {
        margin-left: 8px;
    }

    .follow_active {
        color: #f44;
        animation: showHeart .5s ease-in-out 0s;
    }

    /*animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致*/
    /*animation-duration ：指定元素播放动画所持续的时间*/
    /*animatino-timing-function ： 和transition中的transition-timing-function 中的值一样。根据上面@keframes中分析的animation中可能存在多个小动画，因此这里的值设置是针对每一个小动画所在时间范围内的属性变换速率。*/
    /*animation-delay：定义在浏览器开始执行动画之前等待的时间，这里是指整个animation执行之前的等待时间，而不是上面说的多个小动画*/
    /*animation-iteration-count：定义动画的播放次数，其通常为整数，默认是1,；取值为infinite，动画将无限次的播放。*/
    /*animation-direction：主要用来设置动画播放方向*/
    @keyframes showHeart {
        0% {
            color: #f44;
            transform: scale(1);
        }
        25% {
            color: #fff;
            transform: scale(0);
        }
        80% {
            color: #f44;
            transform: scale(1.2);
        }
        100% {
            color: #f44;
            transform: scale(1);
        }
    }

    /*分享样式*/
    .share_hover {
        position: fixed;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 1000;
        top: 0;
        left: 0;
    }

    .share_hover2 {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 1001;
        top: 0;
        left: 0;
    }

    .icon_share {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        animation: shareGuid 2s linear infinite;
    }

    @keyframes shareGuid {
        0% {
            top: 0;
            right: 0;
        }
        50% {
            top: 35px;
            right: 35px;
        }
        100% {
            top: 0;
            right: 0;
        }
    }

    .share_box {
        position: fixed;
        bottom: -300px;
        width: 100%;
        z-index: 1002;
        background: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        transition: .5s;
    }

    .share_active {
        transform: translateY(-300px);
    }

    .share_tips {
        text-align: center;
        line-height: 40px;
        color: #333;
    }

    .share_ul {
        box-sizing: border-box;
        padding: 0 25px 25px;
        border-bottom: 1px solid #e8e8e8;
    }

    .share_li {
        float: left;
        width: 33%;
        text-align: center;
    }

    .share_li i {
        font-size: 44px;
    }

    .share_cancel {
        text-align: center;
        line-height: 48px;
        color: #777;
        text-align: center;
    }

    .pengyouquan {
        color: #47D000;

    }

    .pengyouquan_li {
        animation: rotating 8s linear infinite
    }

    @keyframes rotating {
        from {
            transform: rotate(0)
        }
        to {
            transform: rotate(360deg)
        }
    }

    .weixin {
        color: #20CA2E;
    }

    .lianjie {
        color: #cdcdcd;
    }

    /*推广商品*/
    .recommend_box {
        position: absolute;
        background: #fff;
        color: #333;
        border-radius: 3px;
        width: 310px;
        padding: 10px 15px;
        box-sizing: border-box;
        top: 0;
        left: -500px;
    }

    .recommend_top {
        margin-bottom: 5px;
    }

    .recommend_left {
        color: #999;
        float: left;
    }

    .recommend_right {
        float: right;
        color: #999;
    }

    .recommend_b_left {
        float: left;
        width: 80px;
        height: 80px;
        padding-top: 10px;
    }

    .recommend_b_left img {
        float: left;
        width: 80px;
        height: 80px;
    }

    .recommend_b_right {
        margin-left: 96px;
    }

    .recommend_b_title {
        height: 46px;
        overflow: hidden;
        padding-top: 4px;
        overflow: hidden;
    }

    .recommend_view_left {
        float: left;
        font-size: 12px;
        color: #999;
        line-height: 24px;
    }

    .recommend_view_right {
        float: right;
        color: #f44;
    }

    .product_gouwuche1 {
        font-size: 20px;
    }

    .active_recommend {
        top: -10px;
        transform: translateX(515px);
        animation: leftIn 2s linear;
    }

    @keyframes leftIn {
        0% {
            top: -10px;
            transform: translateX(0px);
            /*left: -500px;*/
        }
        100% {
            top: -10px;
            transform: translateX(515px);
        }
    }

    .remove_recommend {
        animation: leftOut 2s linear;
        top: 7px;
        transform: translateX(-800px);
    }

    .remove_recommend2 {
        display: none;
    }

    @keyframes leftOut {
        0% {
            top: 7px;
            transform: translateX(0px);
        }
        100% {
            top: 7px;
            transform: translateX(-800px);
        }
    }

    .tag_image {
        width: 50px;
        height: 50px;
        border: 1px solid #fff;
        box-sizing: border-box;
        border-radius: 50%;
        margin-bottom: 20px;
        position: relative;
    }

    .tag_image_active {
        margin-bottom: 10px;
    }

    .production_a {
        float: left;
        line-height: 30px;
        font-size: 14px;
        position: relative;
        top: 1px;
    }

    .production_author {
        float: left;
        line-height: 30px;
    }

    html, body, div, p {
        margin: 0;
        padding: 0;
    }

    html, body {
        font-size: 0.16rem;
        background-color: #ffffff;
    }

    ::-webkit-input-placeholder {
        color: rgba(0, 0, 0, 0.20);
    }

    :-moz-placeholder {
        color: rgba(0, 0, 0, 0.20);;
    }

    ::-moz-placeholder {
        color: rgba(0, 0, 0, 0.20);
    }

    :-ms-input-placeholder {
        color: rgba(0, 0, 0, 0.20);
    }

    .box {
        padding: 0.01rem 0rem;
        min-height: 2.2rem;
        background-image: url('/images/banner_img.png');
        background-size: 100% 2.2rem;
        background-repeat: no-repeat;
    }

    .font-size-13 {
        font-size: 0.13rem;
    }

    .font-size-14 {
        font-size: 0.14rem;
    }

    .font-size-17 {
        font-size: 0.17rem;
    }

    .font-size-16 {
        font-size: 0.16rem;
    }

    .font-size-18 {
        font-size: 0.18rem;
    }

    .font-size-20 {
        font-size: 0.2rem;
    }

    .font-color-1 {
        color: #999999;
    }

    .font-color-2 {
        color: #030303;
    }

    .font-color-3 {
        color: #4C4948;
    }

    .font-color-4 {
        color: #b2b2b2;
    }

    .font-w {
        font-weight: 600;
    }

    .font-w5 {
        font-weight: 500;
    }

    .fixed-height {
        height: 0.52rem;
        position: relative;
    }

    .border-bottom {
        border-bottom: 1px solid #F5F5F5;
    }

    .d-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .flex-auto {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .align-items-center {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .justify-content-center {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-wrap {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }

    .margin-t-40 {
        margin-top: 0.4rem;
    }

    .margin-t-30 {
        margin-top: 0.3rem;
    }

    .margin-t-20 {
        margin-top: 0.2rem;
    }

    .margin-t-15 {
        margin-top: 0.15rem;
    }

    .margin-b-30 {
        margin-bottom: 0.3rem;
    }

    input {
        height: 0.27rem;
        border: none;
        outline: none;
        -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
    }

    .line {
        height: 0.17rem;
        width: 1px;
        background-color: #eeeeee;
        margin: 0 0.1rem 0 0rem;
    }

    .area-code {
        position: absolute;
        opacity: 0;
        width: 0.55rem;
        height: 0.52rem;
        top: 0;
        left: 0;
        z-index: 999;
    }

    .card-form {
        background-color: #fff;
        box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.09);
        border-radius: 0.1rem;
        margin-top: 1.49rem;
        margin-left: 0.15rem;
        margin-right: 0.15rem;
    }

    .card-info {
        padding-top: 0.3rem;
    }

    .card-info > p {
        line-height: 0.25rem;
    }

    .user-info {
        padding: 0 0.25rem;
    }

    .time-bg {
        background-image: url("/images/card_img.png");
        height: 0.61rem;
        width: 1.84rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 0.2rem;
        color: #715824;
    }

    .agreement {
        text-decoration: underline;
    }

    .btn {
        background: #FDD000;
        border-radius: 100px;
        height: 0.44rem;
        line-height: 0.44rem;
        font-size: 17px;
        color: #4C4948;
        text-align: center;
        margin-top: 0.2rem;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    .error {
        font-size: 0.13rem;
        color: #FF3B30;
        margin-top: 0.05rem;
    }

    .text-center {
        text-align: center;
    }

    .line-height {
        line-height: 1.24;
    }

    .story-img {
        width: 3.29rem;
        height: 5.65rem;
        background-image: url("/images/gushi_img.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: 0.4rem 0;
    }

    .logo-img {
        width: 0.77rem;
        height: 0.73rem;
        background-image: url("/images/logo_text_img.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: 0.15rem;
    }

    .jinghua-img {
        width: 3.45rem;
        height: 3.43rem;
        background-image: url("/images/jinghuajiedu_img.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: 0.33rem;
    }

    .pos {
        margin-top: 50px;
        margin-bottom: 10px;
    }

    .pos div {
        margin-bottom: 10px;
    }

    .pos div:last-child {
        text-indent: 20px;

    }

    .pos div:last-child button {
        padding: 10px;
        border: none;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: rgba(0, 0, 0, .85);
    }

    .overlay_inner {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
    }

    .loading {
        position: relative;
        background: none;
        width: 27px;
        height: 27px;
        margin: 0 auto;
    }

    .loading > div {
        position: absolute;
        border-radius: 2px;
        background: #000;
        top: 13px;
        left: 13px;
        width: 3px;
        height: 8px;
        -webkit-animation: loading-anim 1s linear infinite;
        animation: loading-anim 1s linear infinite;
    }

    .loading.loading_white > div {
        background: #fff;
    }

    .loading > div:nth-of-type(1) {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
        -webkit-transform: rotate(0deg) translate(0, -12px);
        transform: rotate(0deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(2) {
        -webkit-animation-delay: -0.417s;
        animation-delay: -0.417s;
        -webkit-transform: rotate(30deg) translate(0, -12px);
        transform: rotate(30deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(3) {
        -webkit-animation-delay: -0.333s;
        animation-delay: -0.333s;
        -webkit-transform: rotate(60deg) translate(0, -12px);
        transform: rotate(60deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(4) {
        -webkit-animation-delay: -0.25s;
        animation-delay: -0.25s;
        -webkit-transform: rotate(90deg) translate(0, -12px);
        transform: rotate(90deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(5) {
        -webkit-animation-delay: -0.167s;
        animation-delay: -0.167s;
        -webkit-transform: rotate(120deg) translate(0, -12px);
        transform: rotate(120deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(6) {
        -webkit-animation-delay: -0.0833s;
        animation-delay: -0.0833s;
        -webkit-transform: rotate(150deg) translate(0, -12px);
        transform: rotate(150deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(7) {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-transform: rotate(180deg) translate(0, -12px);
        transform: rotate(180deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(8) {
        -webkit-animation-delay: 0.083s;
        animation-delay: 0.083s;
        -webkit-transform: rotate(210deg) translate(0, -12px);
        transform: rotate(210deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(9) {
        -webkit-animation-delay: 0.167s;
        animation-delay: 0.167s;
        -webkit-transform: rotate(240deg) translate(0, -12px);
        transform: rotate(240deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(10) {
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s;
        -webkit-transform: rotate(270deg) translate(0, -12px);
        transform: rotate(270deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(11) {
        -webkit-animation-delay: 0.333s;
        animation-delay: 0.333s;
        -webkit-transform: rotate(300deg) translate(0, -12px);
        transform: rotate(300deg) translate(0, -12px);
    }

    .loading > div:nth-of-type(12) {
        -webkit-animation-delay: 0.417s;
        animation-delay: 0.417s;
        -webkit-transform: rotate(330deg) translate(0, -12px);
        transform: rotate(330deg) translate(0, -12px);
    }

    @-webkit-keyframes loading-anim {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }

    @keyframes loading-anim {
        0% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }

    [v-cloak] {
        display: none
    }

    .picker {
        margin-right: 10px;
    }

    .input_stype {
        width: 100%;
    }

    .shanghua {
        position: fixed;
        font-size: 24px;
        font-weight: 700;
        width: 30px;
        height: 20px;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 50px;
        -webkit-animation: webSwipeTipAfter 1.5s infinite ease-in-out;
        animation: webSwipeTipAfter 1.5s infinite ease-in-out;
        z-index: 1001;
        opacity: 0;
        color: #999;
    }

    @keyframes webSwipeTipAfter {
        0% {
            bottom: 50px;
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            bottom: 70px;
            opacity: 0;
        }
    }

    .bottom_type2 .bottom_tab {
        width: 100%;
    }

    /*新版样式*/

    .container_top_left {
        line-height: 34px;
    }

    .user_avatar {
        width: 34px;
        height: 34px;
        border-radius: 6px;
        background: #fff;
        float: left;
    }

    .user_name {
        float: left;
        margin-left: 10px;
        color: #fff;
    }

    .container_top_right {
        float: right;
        line-height: 30px;
        background: #f44;
        color: #fff;
        border-radius: 60px;
        padding: 0 14px;
        margin-top: 3px;
    }

    .production_play {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        background: #f44;
        border-radius: 20px;
        float: left;
        margin-left: 15px;
        padding: 0px 10px;
        line-height: 26px;
        margin-top: 2px;
    }

    .production_play2 {
        background: #41b883;
    }

    /*打卡*/
    .video_detail {
        width: 80%;
        text-align: center;
        border-radius: 6px;
        z-index: 9999999;
    }

    .clock_top {
        position: relative;
    }

    .clock_top_title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .clock_top_des {
        font-size: 14px;

    }

    .clock_bottom {
        padding: 25px 0;
    }

    .clock_bottom_cord {
        width: 160px;
        height: 160px;
        margin-bottom: 5px;
        border-radius: 4px;
        border: 6px solid #e8e8e8;
    }

    .clock_top_des {
        font-size: 14px;
    }

    .guanbi {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 14px;
        padding: 3px;
        z-index: 2;
        color: #fff;
        font-weight: 700;
    }

    .icon_clock_bg {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .clock_top_box {
        position: relative;
        z-index: 1;
        padding: 35px 0;
        background: rgba(0, 0, 0, 0.2);
        color: #fff;
        border-radius: 6px;
        text-align: left;
        padding-left: 16px;
    }

    .sign_box_success {
        background: transparent;
        width: 75%;

    }

    .sign_box {
        position: relative;
        transition: .5s;
        animation: rotateSign .5s both;
    }

    @keyframes rotateSign {
        0% {
            transform: rotateY(0deg);
        }
        100% {
            transform: rotateY(720deg);
        }

    }

    .author_has_code {
        width: 100%;
        position: relative;

    }

    .sign_cont {
        position: absolute;
        color: #fff;
        top: 19%;
        width: 93%;
        text-align: center;
    }

    .sign_title {
        font-size: 20px;
        font-weight: 700;
        padding-bottom: 44px;
    }

    .sign_des1 {
        padding-bottom: 10px;
    }

    .guanbi2 {
        color: #fff;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 24px;
        padding: 4px;
    }

    /*评论样式*/
    .comment_container {
        width: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .comment_box {
        padding: 0 15px 52px 15px;
    }

    .comment_top {
        text-align: center;
        font-size: 12px;
        color: #000;
        line-height: 40px;
    }

    .guanbi3 {
        float: right;
        font-size: 12px;
        padding: 0 10px;
        position: absolute;
        right: 6px;
    }

    .comment_li {
        margin-bottom: 20px;
        font-size: 14px;
    }

    .comment_author_left {
        float: left;
    }

    .comment_author_left img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }

    .comment_author_right {
        margin-left: 46px;
        padding-top: 4px;
    }

    .comment_author_top {
        position: relative;
    }

    .comment_author_name {
        margin-bottom: 6px;
        color: #777;
    }

    .icon-shoucang1_box {
        position: absolute;
        right: 0px;
        top: 0;
        text-align: center;
    }

    .comment_author_text {
        color: #555;
        margin-bottom: 10px;
        padding-right: 35px;
    }

    .comment_replay_box {
        padding-left: 46px;
        box-sizing: border-box;
    }

    .comment_replay_li {
        margin-bottom: 10px;
    }

    .comment_replay_left {
        float: left;
    }

    .comment_replay_left img {
        width: 25px;
        height: 25px;
        border-radius: 50%;
    }

    .comment_replay_right {
        margin-left: 35px;
        padding-top: 2px;
    }

    .comment_replay_top {
        position: relative;
        margin-bottom: 6px;
    }

    .comment_replay_text {
        padding-right: 35px;
        margin-bottom: 10px;
        color: #555;
    }

    .comment_author_text span, .comment_replay_text span {
        color: #999;
        font-size: 13px;
        margin-left: 6px;
    }

    .shoucang1_num {
        text-align: center;
        width: 30px;
        font-size: 12px;
        /* right: -4px; */
        position: relative;
    }

    .comment_ul {
        height: 400px;
        overflow-y: auto;
    }

    .comment_input_box {
        position: fixed;
        bottom: 0;
        z-index: 2999;
        width: 100%;
        border-top: 1px solid #e8e8e8;
        background: #fff;
        padding: 10px 15px
    }

    /*.comment_form {*/
    /**/
    /*}*/

    .comment_input {
        border: none;
        resize: none;
        width: 80%;
        float: left;
        color: #555;
        caret-color: #f44;
    }

    .comment_input_right {
        float: right;
    }

    .comment_i {
        font-size: 22px;
        color: #999;
        transition: .3s;
    }

    .comment_i_active {
        color: #f44;
    }

    .icon-zanwupinglun {
        font-size: 100px;
    }

    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateY(80px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all .5s ease;
    }

    /*添加进场效果*/
    .v-move {
        transition: all 1s ease;
    }

    .v-leave-active {
        position: absolute;
    }

    .list-complete-item {
        transition: all 1s;
        display: inline-block;
        margin-right: 10px;
    }

    .list-complete-enter, .list-complete-leave-to
        /* .list-complete-leave-active for below version 2.1.8 */
    {
        opacity: 0;
        transform: translateY(30px);
    }

    .list-complete-leave-active {
        position: absolute;
    }

    .love_active {
        color: #f44;
    }

    /*评论样式*/
    .page_loading_box {
        margin-top: 50%;
    }

    #video_box {
        display: none;
    }

    .test_bg {
        width: 100%;
        height: 100%;
        opacity: .5;
        position: fixed;
        z-index: 12;
        pointer-events: none;
    }

    .production_tip {
        position: absolute;
        bottom: 0px;
        width: 100%;
        line-height: 32px;
        left: 0;
        color: #fbdd21;
        padding: 0px 13px 0px 13px;
        background: rgba(0, 0, 0, 0.4);
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .recommend_b_title_tip {
        font-size: 13px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 5px;
        min-height: 24px;
    }
    .hasSign_number{
        float: right;
        font-size: 14px;
        line-height: 30px;
    }

    .product_box{
        height: 100%;
        position: relative;
        background: #000;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-flex;
        display: flex;
        overflow: hidden;
    }
    .product_box2{
        background: #fff;
        -webkit-align-items: initial;
        -ms-flex-align: initial;
        align-items: normal;
        display: block;
    }
    .video_container{
        height: 100%;
        width: 100%;
        position: relative;

    }
    .play_cont{
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-flex;
        display: flex;
        background: #000;
    }
    .play{
        margin: auto;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: auto;
    }

</style>
<script type="text/javascript">
    (function () {
        var winW = document.documentElement.clientWidth || document.body.clientWidth;
        document.documentElement.style.fontSize = winW / 3.75 + "px";
        window.onresize = function () {
            var winW = document.documentElement.clientWidth || document.body.clientWidth;
            document.documentElement.style.fontSize = winW / 3.75 + "px";
        };
    })(window)
</script>
<body>
<div class="container_box" id="video_box">
    <div class="van_swipe">
        <van-swipe :show-indicators="false" @change="onChange" vertical :loop="false" :initial-swipe="initialSwipe" :touchable="touchable">
            <van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">
                <div v-if="item.video_id!=0" class="product_box">
                    <div class="video_container">
                        <video :id="'video'+index" class="video_box video_cont" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline="true" preload="auto" :poster="item.cover" :src="item.aliyun_video_url" :playOrPause="playOrPause" x-webkit-airplay="allow" x5-video-orientation="portrait" @click="pauseVideo" loop="loop">
                        </video>
                        <div class="play_cont" v-show="isVideoShow">
                            <img v-show="isVideoShow" class="play play_cover" @click="playvideo" :src="item.cover"/>
                        </div>
                        <img v-show="iconPlayShow" class="icon_play" @click="playvideo" src="/images/icon_play.png"/>
                    </div>
                    <div class="tools_right">
                        <div class="tools_r_li">
                            <img :src="item.tag_image" class="tag_image" :class="hasFollow!=0?'tag_image_active':''" @click="toAuthorHome(item)">
                            <span class="tag_add" v-if="hasFollow==0" @click="showClockPop">+</span>
                        </div>
                        <div class="tools_r_li" @click="changeFollow(item,index)">
                            <i class="iconfont icon-shoucang icon_right" :class="item.follow?'follow_active':''"></i>
                            <div class="tools_r_num">{{item.love_count}}</div>
                        </div>
                        <div class="tools_r_li" @click="changeComment">
                            <i class="iconfont icon-liuyan icon_right icon_right_change"></i>
                            <div class="tools_r_num">{{item.comment_count}}</div>
                        </div>
                        <div class="tools_r_li" @click="changeShare">
                            <i class="iconfont icon-iconfontforward icon_right icon_right_change"></i>
                            <div class="tools_r_num">{{item.relay_count}}</div>
                        </div>
                    </div>
                    <div class="production_box">
                        <div :class="item.subtitle==''?'production_no_tip':''">
                            <div class="production_box1 " :class="showRecommend?'remove_recommend':''">
                                <div class="production_top" @click="toCardSale(item.tag_id)">
                                    <i class="iconfont icon-gouwuche product_go"></i>
                                    <span class="production_title">{{advertisementDetail.title}}</span>
                                    <div class="clear"></div>
                                </div>
                                <div class="production_name">
                                    <div class="production_a">@</div>
                                    <div class="production_author" @click="toAuthorHome(item)">{{item.author}}</div>
                                    <div class="production_play" @click="showClockPop" v-if="hasFollow==0">+ 参与打卡</div>
                                    <div class="production_play" v-if="hasFollow==1" @click="playvideo">观看视频打卡</div>
                                    <div class="production_play production_play2" v-if="hasFollow==2">已打卡{{hasSignDay}}天
                                    </div>
                                    <div class="hasSign_number" v-if="hasSign_number>0">{{hasSign_number}}人参加打卡</div>
                                    <div class="clear"></div>
                                </div>
                                <div class="production_des">
                                    {{item.description}}
                                </div>
                            </div>
                        </div>
                        <div class="production_tip" v-if="item.subtitle!=''" :class="showRecommend?'remove_recommend2':''">{{item.subtitle}}
                        </div>
                        <div class="recommend_box" :class="showRecommend?'active_recommend':''" @click="toCardSale(item.tag_id)">
                            <div class="recommend_top">
                                <div class="recommend_left">
                                    视频中同款商品
                                </div>
                                <div class="recommend_right" @click.stop="changeRecommend">X</div>
                                <div class="clear"></div>
                            </div>
                            <div class="recommend_bottom">
                                <div class="recommend_b_left">
                                    <img :src="advertisementDetail.img_url">
                                </div>
                                <div class="recommend_b_right">
                                    <div class="recommend_b_title">{{advertisementDetail.title}}</div>
                                    <div class="recommend_b_title_tip">{{item.subtitle}}</div>
                                    <div class="recommend_view">
                                        <div class="recommend_view_left">{{item.view_count}}人看过</div>
                                        <div class="recommend_view_right">
                                            <i class="iconfont icon-gouwuche1 product_gouwuche1"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="item.video_id==0" class="product_box product_box2">
                    <div class="box">
                        <video :id="'video'+index" class="video_box" width="100%" height="100%" style="display: none" :poster="item.cover" :src="item.aliyun_video_url" @click="pauseVideo">
                        </video>
                        <div class="d-flex flex-auto flex-column card-form">
                            <div class="d-flex flex-column align-items-center card-info"><p class="font-size-16 font-color-3">
                                免费领取樊登读书21天会员卡</p>
                                <div class="time-bg d-flex flex-column align-items-center justify-content-center">
                                    <div>
                                        <div class="font-size-18 text-center line-height font-w5">21天体验</div>
                                        <div class="font-size-16 text-center line-height font-w5">VIP会期</div>
                                    </div>
                                </div>
                            </div>
                            <div class="user-info margin-t-20">
                                <div class="fixed-height border-bottom d-flex align-items-center">
                                    <input type="text" name="" maxlength="22" placeholder="请输入姓名" class="user-name font-size-16 font-color-2 input_stype" v-model="name">
                                </div>
                                <div class="fixed-height border-bottom d-flex align-items-center">
                                    <div class="picker font-color-2">+86</div>
                                    <div class="line"></div>
                                    <input type="tel" name="" class="mobile font-size-16 font-color-2 flex-auto" @input="change" v-model="mobile" placeholder="请输入手机号">
                                </div>
                                <div class="error" v-show="isError">{{errorText}}</div>
                            </div>
                            <div class="btn" @click="checkMessage">领&nbsp;&nbsp;取</div>
                            <div class="d-flex justify-content-center margin-t-15 margin-b-30 font-color-4 font-size-13">
                                <div>点击领取即表示同意</div>
                                <div class="agreement" @click="goServiseAgreement">&nbsp;樊登读书服务协议</div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-swipe-item>
        </van-swipe>
        <div class="share_hover" v-show="showShareBox" @click="cancelShare"></div>
        <div class="share_hover2" v-show="showGiudBox" @click="showGuidWx(1)">
            <img src="/images/icon_share.png" class="icon_share">
        </div>
        <div class="share_box" :class="showShareBox?'share_active':''">
            <div class="share_tips">分享到</div>
            <ul class="share_ul">
                <li class="share_li pengyouquan_li" @click="showGuidWx(0)">
                    <i class="iconfont icon-pengyouquan pengyouquan"></i>
                </li>
                <li class="share_li" @click="showGuidWx(0)">
                    <i class="iconfont icon-weixin weixin"></i>
                </li>
                <li class="share_li" @click="copyUrl">
                    <i class="iconfont icon-lianjie lianjie"></i>
                </li>
                <div class="clear"></div>
            </ul>
            <div class="share_cancel" @click="cancelShare">取消</div>
        </div>
    </div>
    <i class="iconfont icon-icon_shanghua shanghua black" v-show="touchable"></i>
    <div class="container_top">
        <div class="container_top_left">
            <img :src="userData.user_avatar" class="user_avatar"/>
            <div class="user_name">{{userData.user_nickname}}</div>
        </div>
        <div class="container_top_right" v-if="signInSource!=0" @click="changeTab(1)">
            个人中心
        </div>
        <div class="container_top_right" v-if="signInSource==0" @click="showClockPop">
            免费参加视频学习
        </div>
        <div class="clear"></div>
    </div>
    <van-popup v-model="showClock" :overlay="true" class="video_detail">
        <div class="clock_box">
            <i class="iconfont icon-guanbi1 guanbi" @click="closeClock"></i>
            <div class="clock_top">
                <img src="/images/icon_clock_bg.jpg" class="icon_clock_bg">
                <div class="clock_top_box">
                    <div class="clock_top_title">参加{{currentVideo.author}}打卡-每日进步30秒</div>
                    <div class="clock_top_des">每日打卡提醒时间 21:00</div>
                </div>
            </div>
            <div class="clock_bottom">
                <img class="clock_bottom_cord" :src="qrCode" v-show="qrCode!=''">
                <div class="clock_top_des" v-show="showClockType==0">长按图片扫描二维码参与打卡<br>每天30秒短视频，轻松有收获</div>
                <div class="clock_top_des" v-show="showClockType==1">长按图片扫描二维码<br>接收评论回复提醒</div>
            </div>
        </div>
    </van-popup>
    <van-popup v-model="signSuccess" :overlay="true" class=" sign_box_success">
        <div class="sign_box">
            <img src="/images/sign_bg.png" class="author_has_code">
            <div class="sign_cont">
                <div class="sign_title">打卡成功</div>
                <div class="sign_des1">已打卡 {{hasSignDay}} 天</div>
                <div class="sign_des2">每天30秒，轻松有收获</div>
            </div>
            <i class="iconfont icon-guanbi guanbi2" @click="closeSign"></i>
        </div>
    </van-popup>
    <van-popup v-model="commentPop" :overlay="true" class="comment_container" position="bottom">
        <div class="comment_box">
            <div class="comment_top">
                {{videoComment.length}}条评论
                <i class="iconfont icon-guanbi1 guanbi3" @click="closeComment"></i>
            </div>
            <ul class="comment_ul">
                <div v-if="videoComment.length!=0">
                    <transition-group appear>
                        <li class="comment_li" v-for="(item,index) in videoComment" :key="item" @click="replayUser(item,index,-1)">
                            <div class="comment_author_left">
                                <img :src="item.avatar">
                            </div>
                            <div class="comment_author_right">
                                <div class="comment_author_top">
                                    <div class="comment_author_name">@{{item.nickname}}</div>
                                    <div class="icon-shoucang1_box" @click.stop="commentLove(item,index,-1)">
                                        <div class="icon_right_change" :class="item.love_comment?'love_active':''">
                                            <i class="iconfont icon-shoucang1"></i>
                                        </div>
                                        <div class="shoucang1_num">{{item.love_count}}</div>
                                    </div>
                                </div>
                                <div class="comment_author_text">
                                    {{item.comment_content}}<span>{{item.create_time}}</span></div>
                            </div>
                            <div class="clear"></div>
                            <div class="comment_replay_box">
                                <transition-group appear>
                                    <div class="comment_replay_li" v-for="(item2,index2) in item.child_comment" :key="item2" @click.stop="replayUser(item2,index,index2)">
                                        <div class="comment_replay_left">
                                            <img :src="item2.avatar">
                                        </div>
                                        <div class="comment_replay_right">
                                            <div class="comment_replay_top">
                                                <div class="comment_replay_name">@{{item2.nickname}}</div>
                                                <div class="icon-shoucang1_box" @click.stop="commentLove(item2,index,index2)">
                                                    <div class="icon_right_change" :class="item2.love_comment?'love_active':''">
                                                        <i class="iconfont icon-shoucang1 "></i>
                                                    </div>
                                                    <div class="shoucang1_num">{{item2.love_count}}</div>
                                                </div>
                                            </div>
                                            <div class="comment_replay_text">
                                                <span v-if="item.user_id!=item2.be_commented_user_id && item.user_id!=item2.user_id">回复 {{item2.be_commented_nickname}}：</span>
                                                {{item2.comment_content}}
                                                <span>{{item2.create_time}}</span></div>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                </transition-group>
                            </div>
                        </li>
                    </transition-group>
                </div>
                <div class="no_message" v-if="videoComment.length==0">
                    <i class="iconfont iconfont_style icon-zanwupinglun"></i>
                    <div class="no_message_tips">暂无评论</div>
                </div>
            </ul>
        </div>
    </van-popup>
    <div class="comment_input_box_hover"></div>
    <div class="comment_input_box" v-show="commentPop">
        <input :placeholder="commentPlaceholder" class="comment_input" v-model="comment_text" ref="content" @keyup.enter="checkComment"/>
        <div class="comment_input_right" @click="checkComment">
            <i class="iconfont icon-fasong comment_i" :class="canSend?'comment_i_active':''"></i>
        </div>
    </div>
</div>
<div class="page_loading_box">
    <div class="spinner3">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<div class="tips_container">
    <span class="tips_text">信息提示</span>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/h5_style.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.4/vue.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
<script src="https://js.fundebug.cn/fundebug.1.7.3.min.js" apikey="513d838189d6c8f41fba9b166a1c79b5d62dc77923e5b94c578312735002ad9f"></script>
<script type="text/javascript">
    $(document).ready(function () {


        window.addEventListener("unhandledrejection", event => {
            console.error(`unhandledrejection: ${event.reason}`);
        });

    });
    let u = navigator.userAgent;
    let documentW = (document.documentElement.clientWidth || document.body.clientWidth);
    var overflowMap;
    let isios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    let videoInterval;
    let clickShare = 0;
    let videoEffectiveInterval;//有效播放视频控制
    let vueApp;
    if ("fundebug" in window) {
        fundebug.filters = [
            {
                message: /WeixinJSBridge is not defined/
            }
        ];
    }

    try{
        vueApp =new Vue({
            el: '#video_box',
            data: {
                current: 0,//当前播放第几个
                videoList: [],//视频列表
                isVideoShow: true,
                playOrPause: true,
                video: null,
                iconPlayShow: true,
                isAndroid: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
                isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
                tabIndex: 0,
                showShareBox: false,// 展示分享框
                showGiudBox: false,// 引导分享
                showRecommend: false,// 展示商品
                page: 1,
                size: 3,
                initialSwipe: 0,
                currentVideo: '',
                video_id: '',
                push_video_id: '',
                store_id: 4,
                tOpenid: '',
                loveVideoList: [],
                tag_id: 1,
                mobile: "",
                name: '',
                errorText: '',
                isError: false,
                touchable: true,
                showClock: false,
                showClockType: 0,
                signSuccessIndex: 0,
                signSuccess: false,
                hasSignSuccess: false,//已打卡
                hasSignDay: 0,//已打卡
                hasFollow: 0,
                signInSource: 0,//是否是第一次行公众号进入
                qrCode: '',
                userData: '',
                commentPop: false,//是否展示评论弹框
                comment_text: '',
                canSend: false,
                videoComment: [],
                commentPlaceholder: '留下你精彩的评论吧',
                replayUserData: '',
                to_comment_id: 0,
                channel_id: 1,//默认代理id
                isSending: false,//是否发送过评论，防止多次见底
                advertisementDetail: {
                    "tag_name": "樊登读书",
                    "advertisement_id": -1,
                    "channel_id": 1,
                    "title": "免费领取樊登读书21天会员卡",
                    "advertisement_url": "/m/card/sale?source=card",
                    "img_url": "https://bendipin.oss-cn-beijing.aliyuncs.com/style/fandeng.jpeg",
                    "open_status": 1,
                    "default_status": 0,
                    "status": 1,
                },//默认占位广告
                newAdvertisementList: [],//存放已取过的广告
                isOneAd: false,//是否只存在一条广告
                hasSign_number:0,//参与打卡人数
                effectivePlayId:0
            },
            watch: {
                //监听输入变化
                comment_text(newV, oldV) {
                    newV == '' ? this.canSend = false : this.canSend = true
                }
            },
            mounted() {
                let that = this;
                let video_id = GetQueryString('video_id');
                let store_id = GetQueryString('store_id');

                let tag_id = GetQueryString('tag_id');
                //获取评论id
                let comment_id = GetQueryString('comment_id');
                //获取原始推广人
                let channel_id = GetQueryString('channel_id');
                if (channel_id) {
                    this.channel_id = channel_id;
                    set_cache('channel_id', this.channel_id);
                }

                // 禁止分享
                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady);
                    }
                } else {
                    this.onBridgeReady();
                }
                set_cache('tabIndex', 0);

                if (store_id) {
                    this.store_id = store_id
                }
                if (comment_id) {
                    this.to_comment_id = comment_id
                }

                let tOpenid = GetQueryString('openid');
                if (tOpenid) {
                    this.tOpenid = tOpenid;
                    set_cache('tOpenid', tOpenid)
                }

                if (tag_id) {
                    this.tag_id = tag_id
                }
                async function loads() {
                    that.loadUserMessage(video_id);
                    that.loadVideoLove();

                    //获取签到状态
                    that.getSignRecord();
                    //获取广告
                    that.loadAdvertisementList();
                    // https://bendipin.oss-cn-beijing.aliyuncs.com/banner/20190416094611.jpg
                }
                loads();



                $('.page_loading_box').hide();
                $('#video_box').show();

                if (isios) {
                    $(document).on('focusout', function () {
                        //软键盘收起的事件处理
                        this.showClock = false;
                        window.scroll(0, 0)
                    });
                } else {
                    let winHeight = $(window).height();  //获取当前页面高度
                    $(window).resize(function () {
                        let thisHeight = $(this).height();
                        if (winHeight - thisHeight > 140) {
                            //键盘弹出
                        } else {
                            //键盘收起
                            this.commentPlaceholder = '留下你精彩的评论吧';
                            if (!this.isSending) {
                                setTimeout(() => {
                                    this.replayUserData = '';
                                }, 1000)
                            }
                        }
                    })
                }
            },
            methods: {
                //初始化时屏蔽分享按钮防止点击
                onBridgeReady() {
                    WeixinJSBridge.call('hideOptionMenu');
                },
                //获取视频关联广告
                loadAdvertisementList() {
                    let obj = {
                        tag_id: this.tag_id,
                        channel_id: this.channel_id,
                    };
                    Ajax("get", '/app/api/advertisement/video/list', obj).then(res => {
                        this.advertisementList = res.data;
                        if (this.advertisementList.length <= 1) {
                            this.advertisementDetail = this.advertisementList[0];
                            this.isOneAd = true;
                        } else {
                            //取随机
                            this.isOneAd = false;
                            this.checkAd();
                        }

                    }).catch(err => {
                    });
                },
                //添加广告点击记录
                recordAdd() {
                    let relay_openid = this.tOpenid;
                    let channel_id = this.advertisementDetail.channel_id;
                    let advertisement_id = this.advertisementDetail.advertisement_id;
                    let obj = {
                        channel_id: channel_id,
                        advertisement_id: advertisement_id,
                        video_id: this.currentVideo.video_id,
                        tag_id: this.currentVideo.tag_id,
                        relay_openid: relay_openid,
                    };
                    Ajax("post", '/app/api/advertisement/record/add', obj).then(res => {

                    }).catch(err => {
                    });
                },
                //评论点赞
                commentLove(item, index, index2) {
                    let comment_id = item.comment_id,
                        user_id = item.user_id,
                        love_comment = item.love_comment,
                        love_flag = 0;//0:取消点赞；1：点赞
                    if (love_comment) {
                        //取消点赞
                        love_flag = 0
                    } else {
                        //添加点赞
                        love_flag = 1
                    }
                    let obj = {
                        action: 'love_comment',
                        video_id: this.currentVideo.video_id,
                        comment_id: comment_id,
                        user_id: user_id,
                        love_flag: love_flag
                    };
                    Ajax("get", '/app/api/comment', obj).then(res => {
                        if (index2 == -1) {
                            //点赞一级评论
                            this.videoComment[index].love_comment = !this.videoComment[index].love_comment;
                            if (love_flag == 1) {
                                this.videoComment[index].love_count++
                            } else {
                                this.videoComment[index].love_count--
                            }
                        } else {
                            //点赞二级评论
                            this.videoComment[index].child_comment[index2].love_comment = !this.videoComment[index].child_comment[index2].love_comment
                            if (love_flag == 1) {
                                this.videoComment[index].child_comment[index2].love_count++
                            } else {
                                this.videoComment[index].child_comment[index2].love_count--
                            }
                        }

                    }).catch(err => {
                    });
                },
                //点击回复
                replayUser(item, index, index2) {
                    // // 是否是从我的评论跳转来直接回复
                    // if(from_url=='praise'){
                    //
                    // }else{
                    //
                    // }
                    item.index = index;
                    item.index2 = index2;
                    this.replayUserData = item;
                    this.commentPlaceholder = `回复 @${item.nickname}：`;
                    this.$refs.content.focus();
                },
                //检测评论内容
                checkComment() {
                    if (this.comment_text == '') {
                        showTips('评论内容不能为空')
                    } else {
                        let comment_id = 0, p_id = '', p_user_id = '', content = this.comment_text;
                        if (this.replayUserData != '') {
                            comment_id = this.replayUserData.comment_id;
                            p_id = this.replayUserData.p_id;
                            p_user_id = this.replayUserData.user_id;
                        }
                        this.sendComment(comment_id, p_id, p_user_id, content)
                    }
                },
                //发送评论
                sendComment(comment_id, p_id, p_user_id, content) {
                    let obj = {
                        action: 'add',
                        video_id: this.currentVideo.video_id,
                        tag_id: this.currentVideo.tag_id,
                        title: this.currentVideo.title,
                        comment_id: comment_id,//0为添加，其他为回复
                        p_id: p_id,//被回复的人id
                        p_user_id: p_user_id,//回复的人id
                        content: content,//内容
                    };
                    this.comment_text = '';
                    this.isSending = true;
                    Ajax("post", '/app/api/comment', obj).then(res => {
                        let data = res.data;
                        let newData = {
                            "comment_id": comment_id,
                            "p_id": p_id,
                            "comment_content": content,
                            "love_count": 0,
                            "create_time": "刚刚",
                            "user_id": p_user_id,
                            // "nickname": "张",
                            // "avatar": 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIxbEZu0fBQOYlTLTpqtoezkNiaCBQ4ZXZAKhvPiaFAdI91vBsUkpiaDH4BFkF0icKDfdScfkMSljUlPQ/132',
                            "be_commented_user_id": this.replayUserData.user_id,
                            "be_commented_nickname": this.replayUserData.nickname,
                            "nickname": this.userData.user_nickname,
                            "avatar": this.userData.user_avatar
                        }
                        if (this.replayUserData == '') {
                            //回复作品
                            this.videoComment.splice(0, 0, newData)
                        } else {
                            let index = this.replayUserData.index;
                            let index2 = this.replayUserData.index2;
                            if (this.replayUserData.index2 == -1) {
                                //回复一级人
                                this.videoComment[index].child_comment.splice(0, 0, newData)
                            } else {
                                //回复二级人
                                this.videoComment[index].child_comment.splice(index2, 0, newData)
                            }
                        }

                        if (this.signInSource == 0) {
                            //未参与打卡活，提示二维码
                            if (!this.isiOS) {
                                let video = document.querySelectorAll('video')[this.current];
                                video.style.display = 'none'
                            }
                            this.showClock = true;
                            this.showClockType = 1;
                            this.getQrCode();
                        }

                        this.replayUserData = '';
                        this.isSending = false;

                    }).catch(err => {
                    });
                },
                //获取评论
                getComment() {
                    let obj = {
                        action: 'show',
                        video_id: this.currentVideo.video_id
                    };
                    Ajax("get", '/app/api/comment', obj).then(res => {
                        let data = res.data;
                        this.videoComment = [...this.videoComment, ...data];
                        let to_comment_id = this.to_comment_id;
                        if (to_comment_id != 0) {
                            //从评论列表进来回复
                            this.getCommentDetail(to_comment_id);
                        }
                    }).catch(err => {
                    });
                },
                //获取单个评论
                getCommentDetail(to_comment_id) {
                    let obj = {
                        action: 'show_comment_info',
                        comment_id: to_comment_id
                    };
                    Ajax("get", '/app/api/comment', obj).then(res => {
                        let index;
                        let item = res.data;
                        this.videoComment.map((v, i) => {
                            v.child_comment.map((v2, i2) => {
                                if (v2.comment_id == to_comment_id) {
                                    index = i;
                                    // index2=i2;
                                }
                            });
                        });
                        setTimeout(() => {
                            //对评论重新排序，存在to_comment_id的时候排至第一个
                            let firstComment = this.videoComment.splice(index, 1);
                            this.videoComment.unshift(firstComment[0]);
                            //重设回复人
                            item.index = 0;
                            item.index2 = 0;
                            this.replayUserData = item;
                            this.commentPlaceholder = `回复 @${item.nickname}：`;
                            this.$refs.content.focus();
                        }, 10)

                    }).catch(err => {
                    });
                },
                //弹出评论窗口
                changeComment() {
                    this.commentPop = true;
                    this.videoComment = [];
                    this.getComment()
                },
                //关闭评论弹窗
                closeComment() {
                    this.commentPop = false;
                    this.commentPlaceholder = '留下你精彩的评论吧';
                    this.replayUserData = '';
                },
                //关闭打卡弹窗
                closeSign() {
                    this.signSuccess = false;
                    this.showClockType = 0;
                },
                //视频打卡记录及当日打卡状态
                getSignRecord() {
                    let obj = {
                        tag_id: this.tag_id
                    };
                    Ajax("get", '/app/api/video/sign/in/record', obj).then(res => {
                        let data = res.data;
                        //当前打卡参与人数
                        this.hasSign_number = data.all_count

                        if (data.user_count == 0) {
                            //未参与过活动
                            this.signInSource = 0;
                            this.hasFollow = 0;
                            this.signSuccessIndex = 1;
                        } else {
                            //参与了活动 可以打卡了
                            this.signInSource = 1;
                            if (data.today_sign_in) {
                                //今日已经打卡
                                this.hasFollow = 2;
                                this.hasSignSuccess = true;
                                this.signSuccessIndex = 1;
                                this.signInSource = 1
                            } else {
                                //今日未打卡
                                this.hasFollow = 1;
                                this.signInSource = 1;
                                this.signSuccessIndex = 0;
                            }
                            this.hasSignDay = data.data.length
                        }
                    }).catch(err => {
                    });
                },
                //视频打卡
                videoSign() {
                    if (!this.hasSignSuccess) {
                        let obj = {
                            video_id: this.currentVideo.video_id,
                            tag_id: this.currentVideo.tag_id,
                            title: this.currentVideo.title,
                        };
                        this.hasSignSuccess = true;
                        Ajax("post", '/app/api/video/sign/in', obj).then(res => {
                            this.hasFollow = 2;
                            this.signInSource = 1;
                            this.hasSignDay++;
                            try {
                                gtag('event', '21天打卡', {
                                    'event_category': '活动',
                                    'event_label': `${this.currentVideo.author}`
                                });
                            } catch (e) {

                            }
                        }).catch(err => {
                        });
                    }

                },
                //获取参与视频打卡二维码
                getQrCode() {
                    try {
                        let relay_openid = this.tOpenid;
                        let userData = JSON.parse(get_cache('userData'));
                        // let userData = this.userData;
                        let channel_id = get_cache('channel_id');
                        try {
                            if (userData.user_flag == 1 || userData.user_flag == 3) {
                                //值为1时标明该用户为代理
                                set_cache("channel_id", data.channel_id);
                            }
                        } catch (e) {
                        }
                        if (!channel_id || channel_id == 'null') {
                            channel_id = 1
                        }
                        let obj = {
                            video_id: this.currentVideo.video_id,
                            tag_id: this.currentVideo.tag_id,
                            tag_name: this.currentVideo.tag_name,
                            relay_openid: relay_openid,
                            channel_id: channel_id,
                        };
                        Ajax("post", '/api/item/wx/qrCode', obj).then(res => {
                            // res = {"message":"操作成功","data":"https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=null","count":0,"status":true,"code":0}
                            let data = res.data;
                            if (data.includes('null') || data == '' || data == null) {
                                setTimeout(() => {
                                    this.getQrCode();
                                }, 300);
                            } else {
                                this.qrCode = data
                            }
                        }).catch(err => {
                        });
                    } catch (e) {
                        let userData = JSON.parse(get_cache('userData'));
                        if ("fundebug" in window) {
                            fundebug.notify("qrCodeErr", "获取二维码异常", {
                                metaData: {
                                    e: e,
                                    userData: userData
                                }
                            });
                        }
                    }

                },
                toAuthorHome(item) {
                    let userData = JSON.parse(get_cache('userData'));
                    let channel_id = get_cache('channel_id');
                    if (!channel_id || channel_id == 'null') {
                        channel_id = ''
                    }
                    window.location.href = `/m/video/author?store_id=${this.store_id}&channel_id=${channel_id}&openid=${userData.openid}&source=videoAuthor&tag_id=${this.tag_id}&end`
                },
                showClockPop() {
                    if (this.signInSource == 1) {
                        //点击参与打卡即播放视频
                        this.playvideo()
                    } else {
                        if (!this.isiOS) {
                            let video = document.querySelectorAll('video')[this.current];
                            video.style.display = 'none'
                        }
                        this.showClock = true;
                        this.getQrCode();
                    }
                },
                closeClock() {
                    this.showClock = false
                },
                // 跳转广告链接
                toCardSale(tag_id) {
                    // if (tag_id == 2) {
                    //     try {
                    //         gtag('event', '点击', {
                    //             'event_category': '广告',
                    //             'event_label': '张德芬全国巡讲4.19郑州站报名入口'
                    //         });
                    //     } catch (e) {
                    //
                    //     }
                    //     window.location.href = 'https://www.hdb.com/party/5u8sn.html'
                    // } else {
                    let advertisementDetail = this.advertisementDetail;
                    try {
                        //GA统计
                        gtag('event', '点击', {
                            'event_category': '广告',
                            'event_action': advertisementDetail.title,
                            'event_label': `广告点击`,
                        });
                    } catch (e) {

                    }
                    //获取广告
                    this.recordAdd();
                    window.location.href = advertisementDetail.advertisement_url;
                    // }
                },
                //获取点赞信息
                loadVideoLove() {
                    let obj = {
                        action: "show"
                    }
                    Ajax("get", '/app/api/video/love/status', obj).then(res => {
                        this.loveVideoList = res.data
                    }).catch(err => {
                    });
                },
                //获取用户信息
                loadUserMessage(video_id) {
                    let that = this;
                    let obj = {
                        store_id: this.store_id
                    };
                    Ajax("get", '/api/item/user/info', obj).then(res => {
                        let data = res.data;
                        set_cache("userData", JSON.stringify(data));
                        if (data != null) {
                            this.userData = data;
//                            alert(data.channel_id)
                            if (data.user_flag == 1 || data.user_flag == 3) {
                                //值为1时标明该用户为代理
                                set_cache("channel_id", data.channel_id);
                            }
                        } else {
                            //如果本地用户信息仍然为空，再次获取用户信息
                            let oldUserData = JSON.parse(get_cache('userData'));
                            if (oldUserData) {
                                this.userData = oldUserData;
                            } else {
                                setTimeout(() => {
                                    this.loadUserMessage()
                                }, 300)
                            }
                        }

                        if (video_id) {
                            that.video_id = video_id;
                            that.push_video_id = video_id;
                            that.loadVideoDetail();
                        } else {
                            that.loadVideoList();
                        }

                    }).catch(err => {
                    });
                },
                //获取单视频
                loadVideoDetail() {
                    let obj = {
                        store_id: this.store_id,
                        page: 0,
                        size: this.size,
                        video_id: this.video_id
                    }
                    Ajax('get', '/app/api/video/list', obj).then(res => {
                        let data = res.data;
                        data.map(v => {
                            v.follow = false;
                            this.loveVideoList.map(v2 => {
                                if (v2.video_id == v.video_id) {
                                    v.follow = true
                                }
                            })
                        })
                        this.videoList = [...this.videoList, ...data];
                        if (this.currentVideo == '') {
                            //首次进入
                            this.currentVideo = this.videoList[this.initialSwipe];
                            set_cache('currentVideo', JSON.stringify(this.currentVideo));
                            if (!this.isiOS) {
                                document.title = `${this.currentVideo.author}-${this.currentVideo.title}`;
                            }

                            //配置首次分享
                            setTimeout(() => {
                                if (document.readyState == "complete") { //当页面加载状态为完全结束时进入
                                    if (typeof WeixinJSBridge == "undefined") {
                                        if (document.addEventListener) {
                                            document.addEventListener('WeixinJSBridgeReady', this.getWxShare, false);
                                        } else if (document.attachEvent) {
                                            document.attachEvent('WeixinJSBridgeReady', this.getWxShare);
                                            document.attachEvent('onWeixinJSBridgeReady', this.getWxShare);
                                        }
                                    } else {
                                        //微信分享配置
                                        this.getWxShare();
                                    }
                                }
                            }, 500);
                            // this.loadVideoList();
                        }
                        this.loadVideoList();
                        if (this.to_comment_id != 0) {
                            // 打开评论回复评论
                            this.changeComment()
                        }

                        if (this.signInSource == 0) {
                            //未参与打卡，提前加载二维码
                            this.getQrCode();
                        }


                        if (this.isiOS) {
                            let video = document.querySelectorAll('video')[this.current];
                            //获取宽比
                            let docB = parseFloat(video.videoWidth/documentW);
                            // 计算视频最适高度
                            let realH = parseInt(video.videoHeight/docB);
                            $('.video_container').height(realH);
                            $('.video_cont').height(realH);
                            video.addEventListener('canplaythrough',function(){
                                //获取宽比
                                docB = parseFloat(video.videoWidth/documentW);
                                // 计算视频最适高度
                                realH = parseInt(video.videoHeight/docB);
                                $('.video_container').height(realH);
                                $('.video_cont').height(realH);

                                // if (!this.isiOS) {
                                //     $('.video_container').height(realH);
                                // }

                            });
                        }
                    }).catch(err => {
                    });
                },
                //获取视频列表
                loadVideoList() {
                    let obj = {
                        store_id: this.store_id,
                        page: this.page,
                        size: this.size,
                        tag_id: this.tag_id
                    }
                    Ajax('get', '/app/api/video/list', obj).then(res => {
                        let data = res.data;
                        let newData = [];
                        let adData = {
                            video_id: 0,
                            author: '樊登',
                            title: '免费领取樊登读书21天会员卡',
                            cover: 'https://bendipin.oss-cn-beijing.aliyuncs.com/style/fandeng.jpeg',
                            aliyun_video_url: ''
                        };
                        data.map(v => {
                            v.follow = false;
                            this.loveVideoList.map(v2 => {
                                if (v2.video_id == v.video_id) {
                                    v.follow = true
                                }
                            })
                            if (this.push_video_id != v.video_id) {
                                newData.push(v)
                            }
                        })
                        this.videoList = [...this.videoList, ...newData];
                        // 设置滑动位置
                        this.initialSwipe = this.current;
                        // && this.tag_id != 2
                        if (this.page == 1) {
                            // 非张德芬
                            //是否添加滑动广告
                            // this.videoList.splice(2, 0, adData);
                        }
                        if (this.currentVideo == '') {
                            //首次进入
                            this.currentVideo = this.videoList[this.initialSwipe];
                            set_cache('currentVideo', JSON.stringify(this.currentVideo));
                            if (!this.isiOS) {
                                document.title = `${this.currentVideo.author}-${this.currentVideo.title}`;
                            }
                            setTimeout(()=>{
                                //配置首次分享
                                if (typeof WeixinJSBridge == "undefined") {
                                    if (document.addEventListener) {
                                        document.addEventListener('WeixinJSBridgeReady', this.getWxShare, false);
                                    } else if (document.attachEvent) {
                                        document.attachEvent('WeixinJSBridgeReady', this.getWxShare);
                                        document.attachEvent('onWeixinJSBridgeReady', this.getWxShare);
                                    }
                                } else {
                                    //微信分享配置
                                    this.getWxShare();
                                }
                            },500)

                        }

                    }).catch(err => {
                    });
                },
                //改变收藏状态
                changeFollow(item, index) {
                    if (this.videoList[index].follow) {
                        this.videoList[index].follow = false;
                        this.videoList[index].love_count -= 1;
                        this.cancelLove(index)
                    } else {
                        this.videoList[index].follow = true;
                        this.videoList[index].love_count += 1;
                        this.actionRecord('love')
                    }

                },
                cancelLove() {
                    let obj = {
                        action: "cancel",
                        video_id: this.currentVideo.video_id
                    }
                    Ajax("get", '/app/api/video/love/status', obj).then(res => {

                    }).catch(err => {
                    });
                },
                //展示分享弹窗
                changeShare() {
                    this.showShareBox = true;
                    if (this.clickShare == 0) {
                        this.clickShare++;
                        this.actionRecord('relay')
                    }
                },
                //取消分享
                cancelShare() {
                    this.showShareBox = false;
                    this.showGiudBox = false;
                },
                //改变商品展示效果
                changeRecommend() {
                    //用户主动关闭，设置cookie半天内不再提示
                    let timestamp = new Date() - 0 + 12 * 60 * 60 * 1000;
                    set_cache('isADShop', timestamp);
                    this.showRecommend = false;
                },
                //滑动改变播放的视频
                onChange(index) {
                    //改变的时候 暂停当前播放的视频
                    let video = document.querySelectorAll('video')[this.current];
                    video.pause();
                    this.playOrPause = false;
                    clearInterval(videoInterval);
                    this.showRecommend = false;
                    this.current = index;
                    //安卓播放时重置显示封面。图标等
                    this.isVideoShow = true;
                    this.iconPlayShow = true;
                    // 加载下一页
                    $('.video_container').height('100%');

                    set_cache('initialSwipe', this.initialSwipe);
                    this.currentVideo = this.videoList[index];
                    set_cache('currentVideo', JSON.stringify(this.currentVideo));
                    if (!this.isiOS) {
                        document.title = `${this.currentVideo.author}-${this.currentVideo.title}`;
                    }
                    if (index == ((this.page - 1) * this.size + this.size) - 1) {
                        this.page++;
                        this.loadVideoList();
                    }
                    this.video_id = this.currentVideo.video_id;

                    if (!this.isOneAd) {
                        //不止一条展示随机广告
                        this.checkAd();
                    }


                    if (typeof WeixinJSBridge == "undefined") {
                        if (document.addEventListener) {
                            document.addEventListener('WeixinJSBridgeReady', this.getWxShare, false);
                        } else if (document.attachEvent) {
                            document.attachEvent('WeixinJSBridgeReady', this.getWxShare);
                            document.attachEvent('onWeixinJSBridgeReady', this.getWxShare);
                        }
                    } else {
                        //微信分享配置
                        let userData = JSON.parse(get_cache('userData'));
                        let channel_id = get_cache('channel_id');
                        if (!channel_id || channel_id == 'null') {
                            channel_id = ''
                        }
                        if (!this.isiOS) {
                            if (this.currentVideo.video_id == 0) {
                                //广告分享
                                history.replaceState({}, '每天进步30秒', `/m/card/sale?source=card&channel_id=${channel_id}&openid=${userData.openid}`);
                            } else {
                                history.replaceState({}, '每天进步30秒', `/m/video/detail?video_id=${this.currentVideo.video_id}&channel_id=${channel_id}&store_id=${this.store_id}&openid=${userData.openid}&tag_id=${this.tag_id}&source=videoDetail&end`);
                            }
                        }
                        this.getWxShare();
                    }
                },
                //检测广告是否重复
                checkAd() {
                    //原广告数组大于0，继续随机取原广告中的内容,原广告取完了，重置原广告数量继续取
                    if (this.advertisementList.length == 0) {
                        this.advertisementList = this.newAdvertisementList;
                        this.newAdvertisementList = [];
                    }
                    let arrIndex = Math.floor(Math.random() * this.advertisementList.length);
                    //新广告
                    let newAdvertisementDetail = this.advertisementList[arrIndex];
                    //如果当前取到的广告和上一个一样
                    if (newAdvertisementDetail.advertisement_id == this.advertisementDetail.advertisement_id) {
                        //重新随机
                        this.checkAd();
                    } else {
                        //删掉此索引的数组元素,这时候advertisementList变为新的数组
                        this.newAdvertisementList.push(this.advertisementList.splice(arrIndex, 1)[0]);
                        this.advertisementDetail = newAdvertisementDetail
                    }
                },
                playvideo(event) {
                    let video = document.querySelectorAll('video')[this.current];
                    this.iconPlayShow = false;
                    this.playOrPause = true;
                    video.style.display = "";
                    video.play();

                    if (this.isiOS) {
                        if(this.currentVideo.canplaythrough){
                            this.isVideoShow = false;
                        }
                        //获取宽比
                        let docB = parseFloat(video.videoWidth/documentW);
                        // 计算视频最适高度
                        let realH = parseInt(video.videoHeight/docB);
                        $('.video_container').height(realH);
                        // $('.video_cont').height(realH);
                        video.addEventListener('canplaythrough',()=>{
                            //获取宽比
                            docB = parseFloat(video.videoWidth/documentW);
                            // 计算视频最适高度
                            realH = parseInt(video.videoHeight/docB);

                            $('.video_container').height(realH);
                            //将本视频已缓存 存个标识
                            this.currentVideo.canplaythrough=true;
                            this.isVideoShow = false;
                        });

                    }else{
                        this.isVideoShow = false;
                    }
                    this.actionRecord('view', this.tOpenid);
                    window.onresize = function () {
                        video.style.width = window.innerWidth + "px";
                        video.style.height = window.innerHeight + "px";
                    };

                    try {
                        gtag('event', `${this.currentVideo.author}:${this.currentVideo.title}`, {
                            'event_category': '视频',
                            'event_label': '播放'
                        });
                    } catch (e) {
                    }
                    //记录有效播放时间
                    clearInterval(videoEffectiveInterval)
                    this.effectivePlay(video)

                    //进行打卡
                    if (this.hasFollow == 0 && this.signInSource == 1) {
                        //第一次从公众号进入，一定可以打卡
                        this.videoSign()
                    } else {
                        if (this.hasFollow == 0) {
                            // if (this.isiOS) {
                            //     this.showClockPop()
                            // }
                        } else {
                            this.videoSign()
                        }
                    }

                    let isADShop = get_cache('isADShop');
                    if (isADShop) {
                        //如果缓存的时间小于当前时间戳，则显示广告
                        if (parseInt(isADShop) <= (new Date() - 0)) {
                            //展示滑动广告
                            this.timeOutFive(video)
                        }
                    } else {
                        //展示滑动广告
                        this.timeOutFive(video)
                    }
                    if (!this.isiOS) {
                        this.checkAnPlay(video)
                    }
                },

                //判断安卓是否处于全屏播放
                checkAnPlay(video) {
                    let that = this;
                    video.addEventListener("x5videoexitfullscreen", function () {
                        //退出全屏
                        video.style.display = ""
                        that.isVideoShow = true;
                        that.iconPlayShow = true;
                        if (that.hasFollow == 0 && that.signInSource == 1) {
                            //第一次从公众号进入
                            if (!that.hasSignSuccess) {
                                that.signSuccess = true
                                that.hasSignSuccess = true
                            }
                        } else if (that.hasFollow == 0 && !that.signInSource == 1) {
                            //第一次分享进入并且没参与过
                        } else {
                            //参与了未打卡
                            if (!that.hasSignSuccess || that.signSuccessIndex == 0) {
                                that.signSuccess = true
                                that.hasSignSuccess = true
                                that.signSuccessIndex = 1
                            }
                        }
                        that.touchable = true;
                    })
                    video.addEventListener("x5videoenterfullscreen", function () {
                        //进入全屏
                        that.touchable = false
                    })
                },
                //3秒后自动统计有效播放
                effectivePlay(video) {
                    if(this.effectivePlayId != this.currentVideo.video_id){
                        videoEffectiveInterval = setInterval(() => {
                            if (video.currentTime.toFixed(1) >= 3) {
                                //有效播放
                                this.effectivePlayId = this.currentVideo.video_id;
                                try {
                                    gtag('event', `${this.currentVideo.author}:${this.currentVideo.title}`, {
                                        'event_category': '有效视频',
                                        'event_label': '播放'
                                    });
                                } catch (e) {
                                }
                                clearInterval(videoEffectiveInterval)
                            }
                        }, 1000)
                    }
                },
                //5秒后自动显示商品
                timeOutFive(video) {
                    videoInterval = setInterval(() => {
                        if (video.currentTime.toFixed(1) >= 5) {
                            this.showRecommend = true;
                            clearInterval(videoInterval)
                        }
                    }, 1000)
                },
                //获取当前视频播放时长并展示购买商品
                pauseVideo() { //暂停\播放
                    // let video = document.querySelectorAll('video')[this.current]
                    let video = document.querySelectorAll('video')[this.current];
                    if (this.playOrPause) {
                        video.pause();
                        //安卓暂停后需要退出全屏
                        if (!this.isiOS) {
                            let video = document.querySelectorAll('video')[this.current];
                            video.style.display = 'none'
                        }
                        this.iconPlayShow = true;
                        if (this.hasFollow == 0 && this.signInSource == 1) {
                            //第一次从公众号进入
                            if (!this.hasSignSuccess) {
                                this.signSuccess = true
                                this.hasSignSuccess = true
                            }
                        } else if (this.hasFollow == 0 && !this.signInSource == 1) {
                            //第一次分享进入并且没参与过
                        } else {
                            //参与了未打卡
                            if (!this.hasSignSuccess || this.signSuccessIndex == 0) {
                                this.signSuccess = true
                                this.hasSignSuccess = true
                                this.signSuccessIndex = 1
                            }
                        }
                        //打卡成功
                    } else {
                        video.play();
                        this.iconPlayShow = false;
                        try {
                            // this.actionRecord('view');
                        } catch (e) {

                        }
                        // this.timeOutFive(video)
                    }
                    this.playOrPause = !this.playOrPause;
                },
                onPlayerEnded(player) { //视频结束
                    // var myVideo = document.getElementById("video" + this.current);
                    // myVideo.addEventListener('ended', function () {
                    //     this.webkitExitFullScreen();
                    // });
                    this.isVideoShow = true;
                    this.current += this.current
                },
                //复制当前链接
                copyUrl() {
                    let httpUrl = window.location.href;
                    let oInput = document.createElement('input');
                    oInput.value = httpUrl;
                    document.body.appendChild(oInput);
                    oInput.select(); // 选择对象
                    document.execCommand("Copy"); // 执行浏览器复制命令
                    oInput.className = 'oInput';
                    oInput.style.display = 'none';
                    showTips("链接复制成功，快分享给好友吧");
                    this.showShareBox = false
                },
                //提示微信转发
                showGuidWx(index) {
                    if (index == 0) {
                        this.showGiudBox = true
                    } else {
                        this.showGiudBox = false
                    }
                },
                //设置微信分享
                getWxShare() {
                    let that = this;
                    let obj = {
                        video_id: this.video_id,
                        store_id: this.store_id,
                        openid: this.tOpenid,
                        url: encodeURI(window.location.href)
                    }
                    Ajax("get", '/api/item/wx/share', obj).then(res => {
                        let data = res.data;
                        that.wx_share = data;
                        setTimeout(() => {
                            that.wxShare();
                        }, 500)
                    }).catch(err => {
                    });
                },
                wxShare() {
                    let that = this;
                    wx.config({
                        debug: false,
                        appId: that.wx_share.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
                        timestamp: that.wx_share.timestamp, // 必填，生成签名的时间戳
                        nonceStr: that.wx_share.nonceStr, // 必填，生成签名的随机串
                        signature: that.wx_share.signature, // 必填，签名，见附录1
                        //需要分享的列表项:发送给朋友，分享到朋友圈
                        jsApiList: ["updateTimelineShareData", "updateAppMessageShareData", "onMenuShareTimeline", "onMenuShareAppMessage"]
                    });
                    //处理验证失败的信息
                    wx.error(function (res) {
//                       alert(JSON.stringify(res));
                    });
                    let userData = JSON.parse(get_cache('userData'));
                    let channel_id = get_cache('channel_id');
                    if (!channel_id || channel_id == 'null') {
                        channel_id = ''
                    }
                    let share_title = that.currentVideo.author + '：' + that.currentVideo.title;
                    let share_des = '每天进步30秒';
                    let share_img = that.currentVideo.cover + '?x-oss-process=image/resize,w_200/watermark,image_dnBsYXkucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfNjA,t_90,g_se,x_40,y_120';

                    if (this.currentVideo.video_id == 0) {
                        //广告分享
                        share_title = this.currentVideo.title;
                        share_img = this.currentVideo.cover;
                        history.replaceState({}, '每天进步30秒', `/m/card/sale?source=card&openid=${userData.openid}&channel_id=${channel_id}`);
                    } else {
                        history.replaceState({}, '每天进步30秒', `/m/video/detail?video_id=${this.currentVideo.video_id}&channel_id=${channel_id}&store_id=${this.store_id}&openid=${userData.openid}&tag_id=${this.tag_id}&source=videoDetail&end`);
                    }
                    let share_url = window.location.href;

                    wx.ready(() => {
                        WeixinJSBridge.call('showOptionMenu');
                        if (this.isiOS) {
                            //分享到朋友圈
                            wx.updateTimelineShareData({
                                title: share_title, // 分享标题
                                desc: share_des, // 分享描述
                                link: share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: share_img, // 分享图标
                                success: function (res) {
                                    // 用户确认分享后执行的回调函数
//                            showTips("成功分享朋友圈")
                                },
                                cancel: function (res) {
                                    // 用户取消分享后执行的回调函数
                                    // showTips("取消分享到朋友圈返回:" + res);
                                }
                            });
                            //分享给朋友
                            wx.updateAppMessageShareData({
                                title: share_title, // 分享标题
                                desc: share_des, // 分享描述
                                link: share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: share_img, // 分享图标
                                type: "", // 分享类型,music、video或link，不填默认为link
                                dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
                                success: function (res) {
                                    // 用户确认分享后执行的回调函数
//                            showTips("成功分享给朋友")
                                },
                                cancel: function (res) {
                                    // 用户取消分享后执行的回调函数
                                }
                            });
                        } else {
                            //分享到朋友圈
                            wx.onMenuShareTimeline({
                                title: share_title, // 分享标题
                                desc: share_des, // 分享描述
                                link: share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: share_img, // 分享图标
                                success: function (res) {
                                    // 用户确认分享后执行的回调函数
                                    that.actionRecord('relay')
                                },
                                cancel: function (res) {
                                    // 用户取消分享后执行的回调函数
                                    // showTips("取消分享到朋友圈返回:" + res);
                                }
                            });
                            //分享给朋友
                            wx.onMenuShareAppMessage({
                                title: share_title, // 分享标题
                                desc: share_des, // 分享描述
                                link: share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: share_img, // 分享图标
                                type: "", // 分享类型,music、video或link，不填默认为link
                                dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
                                success: function (res) {
                                    // 用户确认分享后执行的回调函数
                                    that.actionRecord('relay')
                                },
                                cancel: function (res) {
                                    // 用户取消分享后执行的回调函数
                                }
                            });
                        }
                    })

                },
                //影响力统计
                actionRecord(action, relay_openid) {
                    let currentVideo = this.currentVideo;
                    let channel_id = get_cache('channel_id');
                    if (!channel_id || channel_id == 'null') {
                        channel_id = ''
                    }
                    if (currentVideo.video_id != 0) {
                        let obj = {
                            action: action,
                            video_id: currentVideo.video_id,
                            tag_id: currentVideo.tag_id,
                            channel_id: channel_id
                        }
                        if (relay_openid) {
                            obj.relay_openid = relay_openid
                        }
                        Ajax('post', '/app/api/video/action/record', obj).then(res => {
                            this.clickShare == 0;
                        }).catch(err => {
                            if ("fundebug" in window) {
                                fundebug.notify("actionRecord", "影响力数据异常", {
                                    metaData: {
                                        e: err,
                                        obj: obj
                                    }
                                });
                            }
                        });
                    }
                },
                checkMessage() {
                    let that = this;
                    if (!that.name) {
                        that.isError = true;
                        that.errorText = "请输入姓名";
                        return;
                    }
                    if (!that.mobile) {
                        that.isError = true;
                        that.errorText = "请输入手机号";
                        return;
                    }
                    if (!isValidMobile(that.mobile)) {
                        that.isError = true;
                        that.errorText = "手机号错误，请重新填写";
                        return;
                    }
                    let channel_id = get_cache('channel_id');
                    if (!channel_id) {
                        channel_id = 1
                    }
                    let obj = {
                        name: encodeURI(this.name),
                        mobile: this.mobile,
                        channel_id: channel_id
                    }
                    let userData = JSON.parse(get_cache('userData'));
                    if (this.tOpenid != userData.openid) {
                        obj.invite_openid = get_cache('tOpenid')
                    }
                    Ajax("get", '/app/api/item/card/sale', obj).then(res => {
                        let data = res.data;
                        alert(data.message)
                        if (data.status == 0) {
                            try {
                                gtag('event', '领取成功', {
                                    'event_category': '销售',
                                    'event_label': '樊登21天卡'
                                });
                            } catch (e) {
                            }
                            window.location.href = `https://card.dushu.io//generalize/entityCard/success.html?IsNewUser=${data.userInfo.IsNewUser}&StartTime=${data.userInfo.StartTime}&EndTime=${data.userInfo.EndTime}&userId=${data.userInfo.UserId}&timeUnit=${data.timeUnit}`
                        } else {
                            try {
                                gtag('event', '领取失败', {
                                    'event_category': '销售',
                                    'event_label': `樊登21天卡:${this.name}-${this.mobile}`
                                });
                            } catch (e) {
                            }
                            window.location.href = 'https://card.dushu.io/generalize/entityCard/error.html?status=2'

                        }
                    }).catch(err => {
                    });
                },
                empty() {
                    this.mobile = "";
                },
                change() {
                    this.errorText = ''
                },
                goServiseAgreement() {
                    window.location.href = "https://card.dushu.io//license/license.html";
                },
                //改变菜单
                changeTab(index) {
                    this.tabIndex = index;
                    set_cache('tabIndex', index);
                    let userData = JSON.parse(get_cache('userData'));
                    let channel_id = get_cache('channel_id');
                    if (!channel_id || channel_id == 'null') {
                        channel_id = ''
                    }
                    if (index == 1) {
                        window.location.href = `/m/my/home?tag_id=${this.tag_id}&openid=${userData.openid}&channel_id=${channel_id}`
                    } else if (index == 0) {
                        window.location.href = `/m/video/author?store_id=${this.store_id}&openid=${userData.openid}&channel_id=${channel_id}&source=videoAuthor&tag_id=${this.tag_id}&end`
                    }
                },
            }
        })
    }catch (e){
        if ("fundebug" in window) {
            fundebug.notify("vueApp", "vue异常", {
                metaData: {
                    e: e
                }
            });
        }
    }
    function isValidMobile(n) {
        var withCode = /^\+((?!(86|1|81|65))[0-9]\d{7,}|(1)[0-9]{10}|(81)[0-9]{11}|(65)[0-9]{8})$/;
        var china = /^(13[0-9]|15[012356789]|17[01235678]|18[0-9]|14[579]|19[189]|166)[0-9]{8}$/;
        return n ? (withCode.test(n) ? 1 : china.test(n) ? 1 : 0) : 0;
    }

</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124513982-2"></script>
<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());

    gtag('config', 'UA-124513982-2');
</script>
</body>
</html>
